<template>
  <div class="student-main">
    <el-card class="card box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>搜索栏</span>
        <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
      </div>

      <el-row :gutter="20">
        <el-col :span="6">
          <el-input
            v-model="search.name"
            placeholder="根据姓名进行查询"
          ></el-input>
        </el-col>
        <el-col :span="6">
          <el-select v-model="value" placeholder="根据班级查询">
            <el-option
              v-for="item in classList"
              :key="item.id"
              :label="item.label"
              :value="item.className"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-input
            v-model="search.score"
            placeholder="根据成绩进行查询"
          ></el-input>
        </el-col>
        <el-col :span="6">
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="6">
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="6">
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </el-col>

        <el-col :span="6">
          <el-button size="small">重置</el-button>
          <el-button type="primary" size="small" @click="doSearch"
            >查询</el-button
          >
        </el-col>
      </el-row>
    </el-card>

    <div class="container card">
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <!-- <span>卡片名称</span> -->
          <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
          <el-button type="primary" size="small" @click="add">新增</el-button>
        </div>
        <el-table
          v-loading="loading"
          :data="studentList"
          border
          style="width: 100%"
        >
          <el-table-column
            fixed
            label="序号"
            type="index"
            width="50"
          ></el-table-column>
          <!-- <el-table-column prop="date" label="日期" width="150"></el-table-column> -->

          <el-table-column
            prop="name"
            label="姓名"
            width="120"
          ></el-table-column>
          <el-table-column label="性别" width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.sex == 0 ? "男" : "女" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="age" label="年龄" width="80"></el-table-column>
          <el-table-column
            prop="cityText"
            label="地区"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="tel"
            label="电话"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="school"
            label="学校"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="city"
            label="市区"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="address"
            label="地址"
            width="300"
          ></el-table-column>
          <el-table-column prop="job" label="工作" width="120">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope)" type="text" size="small"
                >删除</el-button
              >
              <el-button type="text" size="small" @click="edit(scope.row.id)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <div class="block">
          <!-- <span class="demonstration">分页</span> -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.start"
            :page-sizes="page.sizes"
            :page-size="page.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.totalCount"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>

    <!-- 弹窗 -->
    <add ref="add" :class-list="classList" @refrush="getStudentList"></add>
  </div>
</template>

<script>
import { studentList, studentDel } from "@/api/xs/student";
import { classList } from "@/api/xs/clazz";
import _ from "lodash";
import add from "./add";
export default {
  name: "XsStudent",
  components: {
    add,
  },
  data() {
    return {
      loading: false,
      search: {
        name: "",
      },
      studentList: [],
      radio: "1",
      dialog: false, // 弹窗是否显示
      input: "",
      page: {
        start: 1,
        limit: 10,
        sizes: [10, 20, 30, 40],
        totalCount: 0,
      },
      classList: [],
      value: "",
      form: {
        date: "",
        name: "",
        sex: "",
        age: "",
        province: "",
        city: "",
        address: "",
        // zip: "",
      },
      Id: "",
    };
  },
  created() {
    this.getStudentList();
    this.getClassList();
  },
  methods: {
    handleClick(row) {
      console.log(row);
      this.$confirm("确认删除？")
        .then((_) => {
          studentDel({
            id: row.row.id,
          }).then((res) => {
            console.log(res);
            this.getStudentList();
            console.log(1);
          });
          console.log(2);
          this.dialog = false;
        })
        .catch((_) => {});
    },
    onSubmit() {
      console.log("submit!");
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.limit = val;
      this.getStudentList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.start = val;
      this.getStudentList();
    },
    // handleClose() {
    //   this.dialog = false;
    // },
    add() {
      // this.dialog = true;
      // 控制组件弹出
      this.$refs.add.openDialog();
    },
    edit(id) {
      // 控制组件弹出
      // this.dialog = true;
      console.log(this.id);
      this.$refs.add.openDialog(id);
    },
    close() {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.dialog = false;
        })
        .catch((_) => {});
    },
    getStudentList() {
      this.loading = true;
      var params = {
        start: this.page.start,
        limit: this.page.limit,
        ...this.search,
      };
      //    创建一个对象，这个对象组成为从 object 中经 predicate 判断为真值的属性。 predicate调用2个参数：(value, key)。
      params = _.pickBy(params, (item) => item);
      studentList(params).then((res) => {
        console.log(res);
        this.studentList = res.data.list;
        this.page.totalCount = res.data.totalRow;
        this.loading = false;
      });
    },
    getClassList() {
      classList({
        start: this.page.start,
        limit: this.page.limit,
      }).then((res) => {
        console.log(res);
        this.classList = res.data.list;
      });
    },
    doSearch() {
      this.page.start = 1;
      this.getStudentList();
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  margin: 30px;
}
.el-col {
  padding: 10px;
}
.block {
  margin-top: 20px;
  text-align: right;
}
.el-card .el-col {
  width: 180px;
}
</style>